<!-- cookie -->
{{ with site.Params.cookies }}
  {{ if .enable }}
    <div id="cookie-box" class="cookie-box cookie-box-hide">
      {{ .content | markdownify }}
      <button
        id="cookie-button"
        class="cookie-box-button btn btn-sm btn-outline-primary">
        {{ .button }}
      </button>
    </div>

    <!-- cookie script -->
    <script type="application/javascript">
      const cookieBox = document.getElementById('cookie-box');
      const cookieButton = document.getElementById('cookie-button');
      if (!Cookies.get('cookie-consent')) {
        cookieBox.classList.remove('cookie-box-hide');
        cookieButton.onclick = function () {
          Cookies.set('cookie-consent', true, {
            expires: {{ .expire_days }}
          });
          cookieBox.classList.add('cookie-box-hide');
        };
      }
    </script>

    <!-- cookie style -->
    <style>
      .cookie-box {
        position: fixed;
        left: 2rem;
        bottom: 2rem;
        z-index: 9999;
        padding: 1.5rem;
        background-color: #fff;
        max-width: calc(100% - 4rem);
        width: 25rem;
        box-shadow: 1px 0px 10px 7px rgba(154, 154, 154, 0.11);
        border-radius: inherit;
      }
      .cookie-box-hide {
        display: none;
      }
      .cookie-box-button {
        display: block;
        margin-top: 1rem;
      }

      .dark .cookie-box {
        background-color: #222;
      }
    </style>
  {{ end }}
{{ end }}
